<template>
    <el-dialog :visible.sync="dialogView" top="10rem" width="45rem" custom-class="verifyFiledBox">
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">审核失败</div>
        </div>
        <div class="contentBox">
            <div class="reasonItem" style="margin-top: 2rem;">
                <label class="name"><i class="redSymbol">* </i>分类名称：</label>
                <el-select
                    size="small"
                    v-model="choosenReason"
                    placeholder="请选择"
                    style="width: 20rem; margin-left: 1rem;"
                >
                    <el-option
                        v-for="item in optionsArr"
                        :key="item.id"
                        :label="item.value" 
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="reasonItem" style="margin-top: 2rem;">
                <label class="name"><i class="redSymbol">* </i>失败说明：</label>
                <el-input type='textarea' class="textArea" v-model="explain" />
            </div>
            <div class="btnsField">
                <div class="btn" @click="confirm">确定</div>
                <div class="btn" @click="closeBox">取消</div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    import { getFaildReason } from '../axios.js'
    export default {
        data() {
            return {
                dialogView: false,
                choosenReason: '',
                explain: '',
                optionsArr: []
            }
        },
        props: {
            
        },
        methods: {
            getOptions() {
                getFaildReason().then(res => {
                    if(res.data.status === 200) {
                        this.optionsArr = res.data.result
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            openBox() {
                this.dialogView = true;
            },
            closeBox() {
                this.dialogView = false;
            },
            confirm() {
                let str = `审核失败,失败类型：${this.choosenReason},失败说明：${this.explain}`
                this.$emit('doSave', 2, str)
            }
        },
        mounted() {
            this.getOptions();
        }
    }
</script>
<style scoped>
    .contentBox{
        width: 100%;
        min-width: 40rem;
    }
    .reasonItem{
        width: 70%;
        min-width: 40rem;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .btnsField{
        width: 40%;
        min-width: 30rem;
        margin: 2rem auto;
        text-align: center
    }
    .redSymbol{
        color: #FF0000;
    }
    .textArea{
        width: 19.5rem;
        margin-left: 1rem;
        resize: none;
        height: 15rem;
    }
    .name{
        margin-top: .7rem;
    }
    .btn{
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        background: #7E6B5A;
        color: #FFF;
        cursor: pointer;
        margin: 0 8px;
    }
</style>